var viewpage = document.getElementsByClassName('ctt-ul')[0];
var item = document.getElementsByClassName('ctt-li');
var calList = document.getElementsByClassName('ctt-1')[0];
var prev = document.getElementsByClassName('prev')[0];
var next = document.getElementsByClassName('next')[0];
var circleList = document.getElementsByClassName('circle-list')[0];
var circle = document.getElementsByClassName('circle');

var index = 0; /*图片索引*/
var circleIndex = 0; //焦点索引
var interId2;
//  1自动轮播
function autoplay() {
    interId2 = setInterval(function() {
        index++;
        circleIndex++;
        if (index >= item.length) {
            index = 1;
            viewpage.style.left = '0px';
        }
        if (circleIndex == circle.length) {
            circleIndex = 0;
        }
        initColor(circle); //初始颜色
        circle[circleIndex].className = 'circle active'; //设置当前焦点颜色
        var target = -600 * index;
        moveAnimation(viewpage, target);
    }, 2000);
}
autoplay();

// 2 鼠标悬停动画暂停，鼠标离开动画继续
calList.onmouseover = circleList.onmouseover = function(e) {
    prev.style.display = 'block';
    next.style.display = 'block';
    clearInterval(interId2);
}
calList.onmouseout = circleList.onmouseout = function(e) {
    prev.style.display = 'none';
    next.style.display = 'none';
    autoplay();
}


// 3 点击左右按钮进行移动
next.onclick = function(e) {
    index++;
    circleIndex++;
    if (index == item.length) {
        index = 1;
        viewpage.style.left = '0px';
    }
    if (circleIndex == circle.length) {
        circleIndex = 0;
    }
    initColor(circle);
    circle[circleIndex].className = 'circle active';
    var target = -600 * index;
    moveAnimation(viewpage, target)
}
prev.onclick = function(e) {
    if (index == 0) {
        index = item.length - 1;
        viewpage.style.left = -600 * index + 'px';
    }
    console.log(index);
    index--;
    circleIndex--;
    if (circleIndex < 0) {
        circleIndex = circle.length - 1;
    }
    initColor(circle);
    circle[circleIndex].className = 'circle active';
    var target = -600 * index;
    moveAnimation(viewpage, target)
}

function initColor(arr) { //排他思想
    for (var i = 0; i < arr.length; i++) {
        arr[i].className = 'circle';
    }
}


//循环焦点添加点击事件
for (var i = 0; i < circle.length; i++) {
    circle[i].ind = i;
    circle[i].onclick = function(e) {
        index = this.ind;
        circleIndex = this.ind;
        initColor(circle);
        circle[circleIndex].className = 'circle active';
        var target = -600 * index;
        moveAnimation(viewpage, target)
    }
}


// 大轮播

var bLis = document.getElementsByClassName('box-li');
var points = document.getElementsByClassName('point');

var index = 0; //第几张图片出来  第几个点显示

var clearDdd = function() {
    for (i = 0; i < bLis.length; i++) {
        bLis[i].className = 'box-li';
    }
    for (i = 0; i < points.length; i++) {
        points[i].className = 'point';
    }
}

var goIndex = function() {
    clearDdd();
    console.log(index);
    bLis[index].className = 'box-li ddd';
    points[index].className = 'point ddd';
}

for (i = 0; i < points.length; i++) {
    points[i].addEventListener('click', function() {
        var pointIndex = this.getAttribute('data-index');
        console.log(pointIndex);
        index = pointIndex;
        goIndex();
    });
}